<template>
  <div>
    <div class="header">
      <div class="headleft">
        <span class="iconfont fanhui">&#xe624;</span>
      </div>
      <span class="iconfont sousuo">&#xe632;</span>
      <input type="text" class="headsearch" placeholder="输入景点游玩城市">
      <router-link to="/city">
        <div class="headright">
          {{this.city}}
          <span class="iconfont jiantou">&#xe6aa;</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
// 引入mapState，这样做可以简化代码，详见vuex的stateAPI
import { mapState } from 'vuex' 
export default {
  computed: {
    ...mapState(['city'])
  },
};
</script>

<style lang="less" scoped>
// 引入一些通用样式，例如全局背景色等
// @表示src目录，但是引入css需要在前面加上~才可以使用
@import "~@/assets/styles/common.less";
.header {
  position: relative;
  display: flex;
  line-height: 0.86rem;
  background-color: @baseColor;
  color: #fff;
  .sousuo {
    position: absolute;
    left: 1rem;
    top: 0.05rem;
    color: #ccc;
  }
  .headleft {
    width: 0.64rem;
    float: left;
    text-align: center;
    .fanhui {
      display: block;
    }
  }
  .headsearch {
    flex: 1;
    height: 0.64rem;
    line-height: 0.64rem;
    margin-top: 0.12rem;
    margin-left: 0.2rem;
    background-color: #fff;
    border-radius: 0.1rem;
    color: #ccc;
    padding-left: 0.5rem;
  }
  .headright {
    min-width: 1.04rem;
    padding: 0 .1rem;
    float: right;
    text-align: center;
    color: #fff
  }
}
</style>
